import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';

// import { markRaw } from 'vue';
import { z } from '#/adapter/form';
import { renderDictTag } from '#/utils/render';

import { deviceStatus } from './dict';

export const querySchema: FormSchemaGetter = () => [
  {
    component: 'Select',
    fieldName: 'productId',
    label: '所属产品',
  },
  {
    component: 'Input',
    fieldName: 'deviceSn',
    label: '设备序列号',
  },
  {
    component: 'Input',
    fieldName: 'deviceName',
    label: '设备名称',
  },
  {
    component: 'Select',
    fieldName: 'isOnline',
    label: '是否在线',
    componentProps: {
      fieldNames: { label: 'label', value: 'value' },
      options: deviceStatus,
    },
  },
];

export const columns: VxeGridProps['columns'] = [
  {
    field: 'productName',
    title: '所属产品',
    treeNode: true,
  },
  {
    field: 'deviceName',
    title: '设备名称',
  },
  {
    field: 'deviceSn',
    title: '设备序列号',
  },
  {
    field: 'deviceDesc',
    title: '设备描述',
  },
  {
    field: 'isOnline',
    title: '是否在线',
    slots: {
      default: ({ row }) => {
        return renderDictTag(`${row.isOnline}`, [
          {
            dictLabel: '离线',
            dictValue: '0',
            listClass: 'danger',
          },
          {
            dictLabel: '在线',
            dictValue: '1',
            listClass: 'success',
          },
        ]);
      },
    },
  },
  {
    field: 'action',
    fixed: 'right',
    slots: { default: 'action' },
    title: '操作',
    resizable: false,
    width: 'auto',
  },
];

export const drawerSchema: FormSchemaGetter = () => [
  {
    component: 'Select',
    fieldName: 'productId',
    label: '所属产品',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'deviceName',
    label: '设备名称',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'deviceSn',
    label: '设备序列号',
    help: '支持英文字母、数字、下划线(_)、中划线(-)、点号(.)、半角冒号(:)和特殊字符@，长度限制为4~32个字符',
    rules: z.string().regex(/^[\w\-.:@]{4,32}$/, { message: '不符合格式要求' }),
  },
  {
    component: 'Textarea',
    fieldName: 'deviceDesc',
    label: '设备描述',
  },
];
